<template>
  <h3>ComponentB</h3>
  <p>{{ title }}</p>
  <p>{{ age }}</p>
  <p v-for="(item, index) of names" :key="index">{{ item }}</p>
  <button @click="UpdatedHandle">修改数据</button>
</template>

<script>
export default {
  data() {
    return {

    }
  }
  //, props: ['title']
  , props: {
    title: {
      type: [String, Number, Object, Array]
      // 必选项
      // , required: true

    }
    , age: {
      type: Number
      , default: 0
    }
    // 数字和字符串可以直接default ,但是数组和对象必须使用工厂函数返回默认值
    , names: {
      type: Array
      , default() {
        return ['kong']
      }
    }
  }
  , methods: {
    UpdatedHandle() {
      // console.log(this.title)
      // 错误操作 不允许修改父元素 传递过来的数据
      this.title = '新数据'

    }
  }
}
</script>